4<template>
    <el-dialog :visible.sync="modals" scrollable :title="title" class="order_box" :closable="true" width="1000"  :mask-closable="false" >
        <el-form   label-width="100px" @submit.native.prevent>
            <el-card :bordered="false" shadow="hidden" class="i-table-no-border">
                <div class="ivu-description-list-title">退款信息</div>
                <el-row class="mb10">
                    <el-col :span="12">退款编号：{{order_info.data.refundNo||''}}</el-col>
                    <el-col :span="12">订单编号：{{order_info.order.ordersn}}</el-col>
                </el-row>
                <el-row class="mb10">
                    <el-col :span="12">实付金额：{{order_info.order.payPrice}}元</el-col>
                    <el-col :span="12">退款金额：{{order_info.data.price}}元</el-col>
                </el-row>
                <el-row class="mb10">
                    <el-col :span="12">用户ID：{{order_info.order.uid}}</el-col>
                    <el-col :span="12">用户昵称：{{order_info.order.nickname}}</el-col>
                </el-row>
                <el-row class="mb10">
                    <el-col :span="12">付款时间：{{order_info.order.payTimeDesc}}</el-col>
                    <el-col :span="12">付款方式：
                        <el-tag type="default" v-if="order_info.order.payType == ''">{{order_info.order.payTypeDesc}}</el-tag>
                        <el-tag type="warning" v-else-if="order_info.order.payType == 'yue'">{{order_info.order.payTypeDesc}}</el-tag>
                        <el-tag type="primary" v-else-if="order_info.order.payType == 'offline'">{{order_info.order.payTypeDesc}}</el-tag>
                        <el-tag type="success" v-else-if="order_info.order.payType == 'weixin'">{{order_info.order.payTypeDesc}}</el-tag>
                        <el-tag type="default" v-else>未知</el-tag>
                    </el-col>
                </el-row>
                <el-row class="mb10">
                    <el-col :span="24">退款说明：{{order_info.data.remark}}</el-col>
                </el-row>
                <el-divider style="margin: 20px 0 !important" />

                <div v-if="is_remark" class="ivu-description-list-title">退款处理</div>
                <el-row class="mb10" v-if="is_remark">
                    <el-col :span="24">
                        <el-form-item  label="处理结果：">
                            <el-radio-group v-model="refund_status">
                                <el-radio :label=-1>驳回申请</el-radio>
                                <el-radio :label=20>同意退款</el-radio>
                                <el-radio :label=30>已手动退款</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item  label="驳回原因：" v-if="refund_status == -1">
                            <el-input  placeholder="请输入驳回原因" ref="input" v-model="reason" type="textarea"></el-input>
                        </el-form-item>
                        <div v-if="refund_status == 20">
                            <el-alert type="warning" show-icon> 微信支付方式： 会返回到相应的的支付渠道(如零钱或银行卡）<br><br>如有余额抵扣： 会返回金额到用户余额</el-alert>
                        </div>
                        <div v-if="refund_status == 30">
                            <el-alert type="warning" show-icon> 手动退款： 您用其他方式进行退款，订单会按完成退款处理。</el-alert>
                        </div>
                    </el-col>
                </el-row>
                <div v-if="!is_remark" class="ivu-description-list-title">退款详情</div>
                <el-row class="mb10" v-if="!is_remark">
                    <el-col :span="12">处理方式：{{order_info.data.statusDesc}}</el-col>
                </el-row>
            </el-card>
        </el-form>
        <div slot="footer">
            <el-button @click="cancel">关闭</el-button>
            <el-button v-if="is_remark" type="primary" @click="putSend" :loading="loading">确定</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import { getOrderRefundInfoApi, refundOrderApi } from '@/api/onsite'
    export default {
        name: "orderRefund",
        props: {
            orderId: Number,
            // is_remark : true
        },
        data() {
            return {
                order_info: [],
                remark_info:null,
                title:"订单退款",
                modals: false,
                is_remark:true,
                focus:false,
                reason:'',
                refund_status:0,
                order_status: 0,
                send_locked:false,
                loading:false,
            };
        },
        methods: {
            // 订单详情
            getOrderInfo() {
                getOrderRefundInfoApi(this.orderId).then(async (res) => {
                    this.order_info = res;
                    if(this.is_remark){
                        this.title = '订单退款：' + this.order_info.order.ordersn;
                    }else{
                        this.title = '退款详情：' + this.order_info.order.ordersn;
                    }
                }).catch((res) => {
                    this.$message.error(res.message);
                });
            },
            // 提交
            putSend() {

                if (this.send_locked) {
                    return this.$message.error("请勿重复提交");
                }
                if (this.refund_status == -1 && this.reason == '') {
                    return this.$message.error('驳回原因不能为空');
                }
                if (this.refund_status == 0) {
                    return this.$message.error('请选择退款处理方式');
                }
                if (this.order_info.pay_type == '' && this.order_status !== 0){
                    return this.$message.error('订单未支付，建议驳回至待付款状态');
                }
                this.loading = true;
                let data = {
                    orderId: this.orderId,
                    refundStatus: this.refund_status,
                    reason: this.reason,
                    // order_status: this.order_status
                }
                this.send_locked = true;
                refundOrderApi(data).then(res=>{
                    this.send_locked = false;
                    console.log(res)
                    this.$message.success('操作成功');
                    this.$emit("submitOk");
                    this.loading = false;
                    let that = this;
                    setTimeout(function () {
                        that.modals = false;
                        that.reset();
                    },3000)
                }).catch(res=>{
                    this.send_locked = false;
                    this.loading = false;

                    return this.$message.error(res.message);
                })
            },
            cancel(name) {
                this.modals = false;
                this.reset();
                this.$emit("clearId");
            },
            reset() {
                this.refund_status = 0;
                this.reason = '';
                this.order_status = 0;
            },
        },
    };
</script>

<style scoped lang="stylus">
    .ivu-description-list-title {
        margin-bottom: 20px;
        color: #17233d;
        font-weight: bold;
        font-size: 14px;
    }

</style>
